<template>
    <view>
      <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
        <!-- <view slot="bottom">
          <template>
            <view class="input-product">
              <u-search placeholder="搜索或添加产品" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
            </view>
          </template>
        </view> -->
      </hx-navbar>
	  <view class="search-box flex" ref="tabBarSearch">
	  	<view class="input-product m-b-40">
	  	  <u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
	  	</view>
	  </view>
      <u-grid ref="tabBarSearch" :border="false" class="tabBarSearch">
        <u-grid-item
            v-for="(baseListItem,baseListIndex) in tabBarSearchList"
            :key="baseListIndex"
            class="tabBarSearchItem"
            @click="tabBarSearchItemClick(baseListItem)"
        >
          <view class="title">
            <text>{{baseListItem.title}}</text>
          </view>
          <view>
            <u-icon
                :name="baseListItem.name"
                :size="12"
                color="rgb(83 83 83 / 50%)"
            ></u-icon>
          </view>
        </u-grid-item>
      </u-grid>

      <u-loading-page :loading="pageLoading"></u-loading-page>
      <scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                   @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                   :style="{height: `${screenHeight}px`, backgroundColor: '#fff'}">

        <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
          <u-empty mode="list" />
          <u-button class="empty-button" type="primary" text="新增" @tap="clickBtn({key: 'btn1'})"></u-button>
        </view>

        <view class="list-item" v-for="item in listData" :key="item.id" @click="goDetailPage(item)">
          <view class="list-item-avatar">
            <u-avatar shape="square"></u-avatar>
          </view>
          <view class="list-item-text">
            <view class="title">
              <text class="label blue">{{ item.code }} {{ item.name }}</text>
            </view>
            <view class="bottom">
              <text class="label">{{item.createTime}}</text>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 筛选弹框 - 全部 -->
      <u-popup :show="statusShow" mode="bottom" overlayOpacity="0.3" @close="statusShowClose">
        <view class="popup-bottom-view">
          <u-cell v-for="(item, index) in statusList" :key="index" :title="item.label" @click="targetStatus(item, index)">
            <u-icon v-if="statusActive === item.value" slot="right-icon" size="20" color="#409EFF" name="checkmark"></u-icon>
          </u-cell>
        </view>
      </u-popup>

      <!-- 筛选弹框 - 标签 -->
      <u-popup :show="labelShow" mode="bottom" overlayOpacity="0.3" @close="labelShowClose">
        <view class="popup-bottom-view">
          <u-cell v-for="(item, index) in labelList" :key="index" :title="item.label" @click="targetLabel(item, index)">
            <u-icon v-if="labelActive === item.value" slot="right-icon" size="20" color="#409EFF" name="checkmark"></u-icon>
          </u-cell>
        </view>
      </u-popup>

      <!-- 筛选弹框 - 4 -->
      <u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="show = false">
        <view class="pop-view p-t-88">
          <view>
            <cx-select-customer title="类别" name="SelectCategory" />
            <cx-select-customer title="季度" name="SelectQuarter" />
            <cx-select-customer title="工艺" name="SelectTechnology" />
            <!-- <u-cell title="显示可发数">
              <view slot="value">
                <u-switch v-model="showNumberSend"></u-switch>
              </view>
            </u-cell>
            <u-cell title="隐藏0可发">
              <view slot="value">
                <u-switch v-model="showHideSend"></u-switch>
              </view>
            </u-cell>
            <u-cell title="显示只拿过的产品">
              <view slot="value">
                <u-switch v-model="showOnlyTakenProducts"></u-switch>
              </view>
            </u-cell> -->
          </view>
          <view class="fot-btn flex flex-sw p-l-10 p-r-10">
            <u-button text="重置" shape="circle" class="reset m-r-10"></u-button>
            <u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
          </view>
        </view>
      </u-popup>
    </view>
</template>

<script>
  import {
    listPage
  } from '@/apis/bill/goodSpu'
  import {
    getlist,
  } from "@/apis/bill/information/warehouse";
  import {
    getListTypesData,
	getListClothTypeOptionsData
  } from "@/apis/bill/information/product.js";

  export default {
    name: 'customer-product',
    data() {
      return {
        config: {
          title: "产品",
          color: "#ffffff",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
          rightButton: [
            {
              key: "btn1",
              icon: "&#xe727;",
              position: "left",
            },
            {
              key: "btn2",
              icon: "&#xe888;",
              position: "left",
            },
          ],
        },

        tabBarSearchList: [
          {
            name: 'arrow-down-fill',
            title: '全部',
            key: 'status',
            show: false
          },
          {
            name: 'arrow-down-fill',
            title: '标签',
            key: 'label',
            show: false
          },
        ],
		// 标签 
        labelShow: false,
        labelList: [],
        labelActive: 0,
		// 全部 
        statusShow: false,
        statusList: [{
			value: -1,
			label: '全部'
		}],
        statusActive: -1,

        show: false,
        // showNumberSend: true,
        // showHideSend: false,
        // showOnlyTakenProducts: false,
        // warehouseName: '',

        listData: [],
        pageInfo: {
          current: 1, // 当前页
          size: 15, // 每页数据条数
          order: 'desc', // 排序方向
        },
        searchData: {},
        pageLoading: false,
        triggered: false,
        screenHeight: 0
      }
    },
	onLoad({ id }) {
	  console.log(id)
	  this.initData()
	
	  // uni.$on('data', data => {
	  //   this.warehouseName = data.name
	  // })
	},
	mounted() {
	  const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.tabBarSearch.$el.offsetHeight);
	  const sysInfo = uni.getSystemInfoSync()
	  this.screenHeight = sysInfo.windowHeight - height
	  // 获取标签
	  getListTypesData().then(res=>{
		  if(!res.flag) return
		  this.labelList = res.data;
	  })
	  // 获取全部
	  getListClothTypeOptionsData().then(res=>{
		  if(!res.flag) return
		  this.statusList = [...this.statusList,...res.data];
	  })
	},
    methods: {
      clickBtn(item) {
        if (item.key === "btn1") {
          uni.navigateTo({
            url: '/pages/application/pages/information/product-information/detail/index'
          })
        }
        if (item.key === "btn2") {
          this.show = true
        }
      },
      onSearchChange() {
        this.handlerSearch()
      },
      tabBarSearchItemClick({ key }) {
        const index = this.tabBarSearchList.findIndex(item => item.key === key)
        const checkShow = !this.tabBarSearchList[index].show
        this.tabBarSearchList[index].show = checkShow
        this.tabBarSearchList[index].name = checkShow ? 'arrow-up-fill' : 'arrow-down-fill'

        if (key === 'status') return this.statusShow = true
        if (key === 'label') return this.labelShow = true
      },
      statusShowClose() {
        this.statusShow = false
        this.tabBarSearchList[0].show = false
        this.tabBarSearchList[0].name = 'arrow-down-fill'
      },
      targetStatus(item, index) {
		console.log(item)
		console.log(index)
        this.statusActive = item.value
        this.statusShow = false
        this.tabBarSearchList[0].show = false
        this.tabBarSearchList[0].name = 'arrow-down-fill'
      },
      labelShowClose(item, index) {
        this.labelShow = index
        this.statusShow = false
        this.tabBarSearchList[1].show = false
        this.tabBarSearchList[1].name = 'arrow-down-fill'
      },
      targetLabel(item, index) {
        this.labelActive = index
        this.labelShow = false
        this.tabBarSearchList[1].show = false
        this.tabBarSearchList[1].name = 'arrow-down-fill'
      },
      // changeWarehouse() {
      //   uni.navigateTo({
      //     url: `/pages/application/pages/information/warehouse/warehouse?type=list`
      //   })
      // },
      onRefresherrefresh() {
        this.triggered = true
        this.listData = []
        this.listPage()
      },
      handlerSearch: _.debounce(function() {
        this.listData = []
        this.pageInfo.current = 1
        this.listPage()
      }, 200),
      initData() {
        let billId = {
          data: {
            isEnable: true,
          },
          page: {
            current: 1,
            size: 1,
            sort: "",
            order: "desc",
            total: 0,
            orders: [
              {
                column: "create_time",
                asc: false,
              },
            ],
          },
        };
        getlist(billId).then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          // this.warehouseName = data.records[0].name
        });

        this.listPage()
      },
      listPage() {
        const params = {
          page: this.pageInfo,
          data: this.searchData
        }
        uni.showLoading({
          title: "加载中"
        })
        listPage(params).then(res => {
          if (!res.data.flag) return
          const records = res.data.data.records || []
          this.listData.push(...records)
          console.log(this.listData, 'listData')
        }).finally(_ => {
          this.triggered = false
          this.pageLoading = false
          uni.hideLoading()
        })
      },
      onScrolltolower() {},
      goDetailPage(item) {
		  console.error(item)
		  uni.$emit('productData', item)
		  uni.navigateBack()
        // uni.navigateTo({
        //   url: `/pages/application/pages/cloth/color/index?spuId=${item.id}&name=${item.name}&code=${item.code}&type=billing`
        // })
      }
    }
  }
</script>


<style scoped lang="scss">
.pop-view {
  width: 500rpx;
  padding-top: 270rpx;
  .fot-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 20rpx;
  }
  .reset {
    color: #409eff;
    background-color: #e3edff;
  }
}

.popup-bottom-view {
  padding: 20upx 10upx;
}

.tabBarSearch {
  justify-content: space-evenly !important;
  padding-top: 20upx;
  padding-bottom: 20upx;
  border-bottom: 1upx #dadada solid;
  background-color: #fff;

  .tabBarSearchItem {
    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      margin-right: 20upx;
      color: #535353bf;
    }
  }
}

	.search-box {
		padding-top: 30rpx;
		justify-content: center;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
	.input-product {
	  width: 95%;
	  border-radius: 50upx;
	  height: 70upx;
	  line-height: 70upx;
	  color: #fff;
	  display: flex;
	  background: rgba(248, 248, 248, 0.34);
	}

.list-item {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
}

.list-item-text {
  flex: 1;
  padding-left: 30rpx;

  .title {
    font-size: 30rpx;
  }

  .bottom {
    margin-top: 20rpx;
    font-size: 26rpx;

    .label {
      color: #ababab;
    }

    .number {
      margin-left: 15rpx;
      color: #29b929;
    }

    .meter {
      margin-left: 15rpx;
      color: #87e0ff;
    }
  }
}

.empty-button {
  margin: auto;
  margin-top: 20rpx;
  width: 80%;
}
.blue {
	color: #409EFF;
}

</style>

